<!doctype html>
<html data-framework="vue">

<head>
    <meta charset="utf-8">
    <title>Vue.js • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <style>
    [v-cloak] {
        display: none;
    }
    </style>
</head>

<body>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo">
        </header>
        <section class="main" v-show="todos.length" v-cloak>
            <input class="toggle-all" type="checkbox" v-model="allDone">
            <ul class="todo-list">
                <li class="todo" v-for="todo in filteredTodos" :class="{completed: todo.completed, editing: todo == editedTodo}">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="todo.completed">
                        <label @dblclick="editTodo(todo)">{{todo.title}}</label>
                        <button class="destroy" @click="removeTodo(todo)"></button>
                    </div>
                    <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
                </li>
            </ul>
        </section>
        <footer class="footer" v-show="todos.length" v-cloak>
            <span class="todo-count">
					<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
				</span>
            <ul class="filters">
                <li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
                <li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
                <li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
            </ul>
            <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
                Clear completed
            </button>
        </footer>
    </section>
    <footer class="info">
        <p>Double-click to edit a todo</p>
        <p>Written by <a href="http://evanyou.me">Evan You</a></p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
    <!-- testing/benchmark only -->
    <script>
    var isPhantom = navigator.userAgent.indexOf('PhantomJS') > -1
    if (isPhantom) {
        localStorage.clear()
    } else {
        var now = window.performance && window.performance.now ? function() {
            return window.performance.now()
        } : Date.now
        var metrics = {
            beforeLoad: now()
        }
    }
    </script>
    <!-- end testing/bench -->
    <script src="../dist/vue.js"></script>
    <script>
    metrics.afterLoad = now()
    </script>
    <script src="node_modules/director/build/director.js"></script>
    <script src="js/store.js"></script>
    <script>
    metrics.beforeRender = now()
    </script>
    <script src="js/app.js"></script>
    <script src="js/routes.js"></script>
    <script>
    metrics.afterRender = now()
    </script>
    <script src="perf.js"></script>
</body>

</html>
